<template>
	<!-- 开放招募 -->
	<view class="" style="padding: 35rpx;">
		<view class="fixed bottom left right row-between" style="padding: 15rpx 35rpx;  border-top: 1rpx solid #ccc;">
			<view class="">
				<view class="fs-26">
					<text>{{ seleteItem.WalletPrice ? Math.floor(seleteItem.WalletPrice) : 0 }}</text>
					<text class="marginLeft-10">金币</text>
				</view>
				<view class="marginTop-20 fs-24" style="color: #ccc;">
					剩余：{{ WalletYue ? WalletYue : 0 }}金币
				</view>
			</view>
			<button class="open-button" @click="onPromptlyOpen">立即开放</button>
		</view>


		<view class="" style="display: flex;">
			<image :src="baseUrl + 'icon/fiery_heat.png'" mode="" style="width: 50rpx;height: 50rpx;"></image>
			<view class="fs-38 marginLeft-5 bold">
				您将展示火爆通告
			</view>
		</view>
		<view class="marginTop-30 fs-24">
			该通告竞争激烈，需要支付费用才可展示
		</view>

		<view class="" style="display: flex;flex-direction: row;flex-wrap: wrap;margin-top: 80rpx;">
			<view class="item-block" v-for="(item, index) in paymentOption" :key="index"
				:style="{ marginRight:(index + 1) % 2 != 0? '35rpx': '' }"
				:class="daysIndex == index? 'selectDaysActive': 'selectDay'" @click="onSeleceDays(item, index)">
				<view class="fs-30 bold">{{ item.SetTitle }}</view>
				<view class="marginTop-20 fs-24">{{ Math.floor(item.WalletPrice) }}金币/通告</view>
			</view>
		</view>
		<view class="fs-24 marginTop-35" style="color: #a6a6a6;">
			温馨提示：通告发布的价格根据地区、职类、平台差异有所不同，每月按照30个自然日计算
		</view>

		<fui-dialog :title="consumePrompt.title" :show="consumePrompt.show" :content="consumePrompt.content"
			maskClosable @click="onConsumePrompt" @close="consumePrompt.show = false"></fui-dialog>
		<fui-dialog :title="lackPrompt.title" :show="lackPrompt.show" :content="lackPrompt.content" maskClosable
			@click="onLackPrompt" @close="lackPrompt.show = false"></fui-dialog>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				paymentOption: [
					// {
					// 	buyDays: '7天',   		// 购买天数
					// 	buyMoney: '38金币/通告'	//38、98、148
					// },
					// {
					// 	buyDays: '15天',   		// 购买天数
					// 	buyMoney: '58金币/通告'  //58、168、268
					// },
					// {
					// 	buyDays: '30天',   		// 购买天数
					// 	buyMoney: '98金币/通告'  //98、268、458
					// },
					// {
					// 	buyDays: '60天',   		// 购买天数
					// 	buyMoney: '168金币/通告'	//168、458、788
					// },
				],
				daysIndex: -1,
				consumePrompt: {
					title: '温馨提示',
					show: false,
					content: '立即开放需要消耗58个金币，确定开放吗？'
				},
				lackPrompt: {
					title: '温馨提示',
					show: false,
					content: '金币不足，去获取金币吗？'
				},
				// 选中的值
				seleteItem: {},
				WalletYue: 0,
				currentType: 1,
				NoticeID: 0,
				baseUrl: '',
				listParams: {}
			}
		},
		onLoad(options) {
			this.listParams = options;
			this.baseUrl = this.$baseUrl;
			this.NoticeID = options.NoticeID;
			this.getPaymentOption();
		},
		methods: {
			getPaymentOption() {
				this.$httpost('/WalletSet/BuyNoticeShowSet', {
					PayType: 1,
					PayPlanID: this.listParams.PayPlanID
				}).then(res => {
					// console.log('res', res.data)
					if (res.code == 200) {
						this.paymentOption = res.data.BuyNoticeShowSet;
						this.WalletYue = res.data.UserWalletYue
					}

				})
			},
			onSeleceDays(item, index) {
				this.daysIndex = index
				this.seleteItem = item
			},
			onPromptlyOpen(event) {
				if (this.daysIndex == -1) {
					uni.showToast({
						title: '请选择展示天数！',
						icon: 'error'
					})
					return false;
				}
				if (this.WalletYue <= 0) {
					uni.showModal({
						title: '金币不足！',
						content: `您当前的金币不足，请先充值！`,
						confirmText: '去充值',
						success: res => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/myPages/pages/myWallet'
								})
							}
						}
					})
				}
				uni.showModal({
					title: '温馨提示',
					content: `立即开放需要消耗${Math.floor(this.seleteItem.WalletPrice)}个金币，确定开放吗？`,
					confirmText: '确认开放',
					success: res => {
						if (res.confirm) {
							this.$httpost('/Notices/OpenNotice', {
								NoticeID: this.NoticeID,
								WalletSetID: this.seleteItem.WalletSetID
							}).then(res => {
								uni.showToast({
									title: '开放成功！',
									icon: 'success'
								})
								uni.navigateBack({
									delta: 1
								})
							})

						}
					}
				})
			},
			onConsumePrompt(event) {
				if (event.index == 1) this.lackPrompt.show = true;

			},
			onLackPrompt(event) {
				// console.log(event)
				this.$common.goNavPage(`/myPages/pages/myWallet`)
			},
		}
	}
</script>

<style lang="scss">
	.item-block {
		width: calc((100% - 35rpx) / 2);
		height: 160rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 35rpx;
		border-radius: 10rpx;
	}

	.open-button {
		background-color: #FFDD00;
		font-size: 26rpx;
		height: 70rpx;
		line-height: 70rpx;
		width: 300rpx;
		margin: 0
	}

	.open-button::after {
		border: none;
	}

	.selectDaysActive {
		background-color: transparent;
		border: 5rpx solid #FFDD00;
		box-sizing: border-box;
	}

	.selectDay {
		background-color: #eaeaea;
	}
</style>